html{
    font-size: 13.896293333vw;
}
body{
    background-color: #f5f5f5;
}
/* header */
header{
    display: flex;
    width: 7.2rem;
    height: .83rem;
    background-color: #f2f2f2;
    align-items: center;
    position: sticky;
    top: 0rem;
    z-index: 100;
    .logo{
        width: .48rem;
        height: .31rem;
        display: flex;
        img{
            width: .48rem;
            height: .31rem;
            margin-left: .23rem;
        }
    }
    form{
        display: flex;
        margin: auto;
        position: relative;
        input[type="text"]{
            width: 5.2rem;
            height: .63rem;
            outline: none;
            border: none;
            box-sizing: border-box;
            padding-left: .58rem;
            /* margin-right: .23rem; */
            &::-webkit-input-placeholder{
                color: #afbac1;
            }
        }
        >img:nth-of-type(1){
            width: .59rem;
            height: .59rem;
            position: absolute;
            transform: scale(0.7)
        }
    }
    a{
        >img{
            width: .59rem;
            height: .59rem;
            transform: scale(0.7);
            position: relative;
            left: -0.19rem;
            top: -0.1rem;
        }
    }
    
}
/* nav */
nav{
    background-color: #f2f2f2;
    width: 7.2rem;
    height: .58rem;
    line-height: .58rem;
    position: sticky;
    top: 42px;
    z-index: 15;
    ul{
        display: flex;
        justify-content: space-evenly;
        position: relative;
        li{
            a{
                display: flex;
                font-size: .25rem;
                color: #898989;
                &:hover{
                    color: #ed6917;
                }
            }
        }
        >li:nth-child(1){
            a{
                color: #ed6917;
                box-sizing: border-box;
                border-bottom: .04rem #ed6917 solid;
            }
        }
        >li:nth-child(6){

            display: flex;
            >span{
                position: relative;
                top: 0rem;
                left: .38rem;
                z-index: 40;
                /* &:hover{
                    +.drowdown-content{
                        height: 2.49rem;
                    }
                } */
            }
            .drowdown-content{
                width: 7.2rem;
                height: 0rem;
                background-color: #f2f2f2;
                box-sizing: border-box;
                padding: 0rem .25rem;
                position: absolute;
                z-index: 30;
                left: 0rem;
                top: 0rem;
                overflow: hidden;
                transition: all 1s;
                h1{
                    font-size: .27rem;
                }
                .content{
                    display: flex;
                    flex-wrap: wrap;
                    height: 1.59rem;
                    justify-content: space-between;
                    margin-top: .35rem;
                    >a{
                        font-size: 13px;
                        display: inline-block;
                        width: 1.48rem;
                        height: .52rem;
                        text-align: center;
                        line-height: .52rem;
                        background-color: #ffffff;
                        border: .02rem solid #e6e6e6;
                        border-radius: .1rem;
                        color: #656565;
                    }
                    >a:nth-child(1){
                        color: #fe8638;
                        background-color: #fde0d5;
                    } 
                }
            }
        }
        .drowdown:hover{
            span{
                transform: rotateZ(180deg);
            }
            .drowdown-content{
                height: 2.49rem;
            }
        }
    }
}
/* 轮播图 */
.slideshow{
    margin-top: .04rem;
    .container{
        width: 7.2rem;
        height: 3.6rem;
        overflow: hidden;
        position: relative;
        &::after{
            content: "";
            display: block;
            width: .19rem;
            height: .19rem;
            border-radius: 50%;
            background-color: white;
            position: absolute;
            left: 3.26rem;
            top: 3.26rem;
            animation: small-circle 4s 1s steps(3,end) infinite;
        }
        .circle{
            position: absolute;
            display: flex;
            top: 3.26rem;
            left: 3.26rem;
            >div{
                width: .19rem;
                height: .19rem;
                border-radius: 50%;
                background-color: white;
                opacity: 0.5;
                margin-right: .1rem;
            }
        }
        .pic{
            display: flex;
            width: 21.59rem;
            position: absolute;
            animation: slideshow 4s 1s steps(3,end) infinite;
            img{
                width: 7.2rem;
                height: 3.6rem;
            }
        }
    }
}
@keyframes slideshow{
    from{
        left: 0rem;
    }
    to{
        left: -21.59rem;
    }
}
@keyframes small-circle{
    from{
        left: 3.26rem;
    }
    to{
        left: 4.13rem;
    }
}
/* classify */
.classify{
    width: 7.2rem;
    height: 3.03rem;
    display: flex;
    flex-wrap: wrap;
    a{
        display: flex;
        img{
        width: 1.44rem;
        height: 1.52rem;
        }
    }
    
}
/* 小米11 */
.xiaomi11{
    width: 7.2rem;
    height: 5.07rem;
    display: flex;
    margin-top: .15rem;
    >.left{
        display: flex;
        a{
            img{
                width: 186px;
                height: 5.07rem;
            }
        }
    }
    >.right{
        display: flex;
        width: 3.57rem;
        flex-wrap: wrap;
        a{
            display: flex;
            img{
                width: 3.57rem;
                height: 2.51rem;
            }
        }
    }
}
/* 爆款 */
.hot{
    background-color: white;
    margin-top: .15rem;
    img{
        width: 375px;
        height: 229px;
    }
}
/* 产品 */
.product{
    .product-item{
        width: 7.2rem;
        height: 4.86rem;
        padding: 0rem .12rem;
        box-sizing: border-box;
        background-color: white;
        display: flex;
        .product-item-small{
            width: 3.42rem;
            display: flex;
            flex-wrap: wrap;
            >img{
                width: 3.43rem;
                height: 2.78rem;
            }
            .price{
                width: 3.42rem;
                height: 2.05rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: .19rem;
                h1{
                    font-size: .27rem;
                    color: black;
                    font-weight: 500;
                    text-align: center;
                }
                h2{
                    font-size: .23rem;
                    color: #b8a793;
                    text-align: center;
                }
                h3{
                    font-size: .27rem;
                    color: #ea625b;
                    text-align: center;
                    span:nth-child(1){
                        font-size: .23rem;
                    }
                    span:nth-child(2){
                        font-size: .23rem;
                    }
                }
                >button{
                    width: 2rem;
                    height: .58rem;
                    background-color: #ea625b;
                    color: white;
                    font-size: .23rem;
                    border: none;
                    border-radius: .1rem;
                }
            }
            
        }
    }
}
/* 回顶部 */
.return-top{
    position: sticky;
    top: 9.59rem;
    left: 6.72rem;
    float: left;
    img{
    width: .69rem;
    height: .69rem;
    }    
}
/* 更多手机 */
.more-phone{
    width: 7.2rem;
    height: 1rem;
    line-height: 1rem;
    /* text-align: center; */
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    margin-top: .04rem;
    margin-bottom: -1.15rem;
    a{
        font-size: .27rem;
        color: #666668;
    }
}
/* 电视 */
.tv{
    /* margin-top: -1.92rem; */
    width: 7.2rem;
    height: 4.39rem;
    display: flex;
    img{
        width: 7.2rem;
        height: 4.39rem;
    }
}
.more-tv{
    width: 7.2rem;
    height: 1rem;
    line-height: 1rem;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    a{
        font-size: .27rem;
        color: #666668;
    }
}
/* 笔记本 */
.notebook{
    margin-top: .15rem;
    width: 7.2rem;
    height: 4.39rem;
    img{
        width: 7.2rem;
        height: 4.39rem;
    }
}
.more-notebook{
    width: 7.2rem;
    height: 1rem;
    line-height: 1rem;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    a{
        font-size: .27rem;
        color: #666668;
    }
}
/* 家电 */
.electrical{
    margin-top: .15rem;
    width: 7.2rem;
    height: 4.39rem;
    img{
        width: 7.2rem;
        height: 4.39rem;
    }
}
.more-electrical{
    width: 7.2rem;
    height: 1rem;
    line-height: 1rem;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    a{
        font-size: .27rem;
        color: #666668;
    }
}
/* 智能 */
.intelligence{
    margin-top: .15rem;
    width: 7.2rem;
    height: 2.8rem;
    img{
        width: 7.2rem;
        height: 2.78rem;
    }
}
.more-intelligence{
    width: 7.2rem;
    height: 1rem;
    line-height: 1rem;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    a{
        font-size: .27rem;
        color: #666668;
    }
}
/* 产品分类 */
.product-classify{
    margin-top: .15rem;
    .product-classify-item{
        display: flex;
        .item{
            a{
                display: flex;
                img{
                    width: 3.57rem;
                    height: 4.8rem;
                }
            }
        }
    }
}
/* 以旧换新 */
.old-new{
    margin-top: .15rem;
    img{
        width: 7.2rem;
        height: 2.78rem;
    }
}
/* 底部导航 */
footer{
    width: 7.2rem;
    height: 1rem;
    display: flex;
    justify-content: space-evenly;
    background-color: #ffffff;
    align-items: center;
    position: sticky;
    bottom: 0rem;
    .nav-bottom{
        width: 1.38rem;
        height: .75rem;
        display: flex;
        justify-content: center;
        a{
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
                width: .38rem;
                height: .38rem;
            }
            h1{
                font-size: .23rem;
            }
            
        }
        
    }
    .nav-bottom:nth-child(1){
        a{
            h1{
                color: #ff7517;
            }
        }
    }
}